Open the index page in Dreamweaver MX. In the <title> tag at the top of the HTML code, type Simplicity.

Before you start on the rest of the page, make sure the CSS Styles panel is open in Dreamweaver MX (select Window > CSS Styles). Click the Edit Styles option.

Note: If you're using Dreamweaver 4 or earlier, we recommend that you do all your work either in a text editor or use a CSS editor like TopStyle (PC) or StyleMaster (Macintosh).

Double-click the Body selector in the CSS Styles panel. This opens the CSS Style Definition dialog box for that selector. Select Background in the Category list and enter #FFFFFF as the background color. Click OK.

For those of you who are using a text editor, your selector should contain these properties:

body{
   padding: 0;
   margin: 0;
   background-image: url(images/bg.gif);
   background-repeat: repeat-x;
   background-color: #FFFFFF;
}

You're not ditching all images forever. But for this exercise, you're going to remove the images and replace them with styled text. Feel free to choose your own text and colors.

Select the rectangular Robinson Timkins & Graavs logo called logo.gif and delete it. Don't move your cursor. Type the word Simplicity. Don't worry about how it looks; you'll style it in a moment.

Select the script image at the right top of your page called script.gif. Once again, delete it, leave your cursor where it is, and type Styling with class.

Next you're going to style these two div IDs. Using browser-safe fonts is important if you want your text to be appealing and readable on as many screens as possible. Here are some good sites on the web that list cross-platform fonts that are available:

Font-family properties are listed in hierarchical order on your CSS page. Each browser tries to render your text using the first font in the list of specified fonts. If this font is not on the user's system, it tries the next one, and so on, until it finds a font with which it can display the text.

Many designers don't take advantage of the many interesting things you can do with fonts. For instance, you don't have to use Times, Arial, or Helvetica for your headers. You have the ability to choose something whimsical and less common to begin your font list. The only thing you need to consider is the order of the fonts in your list. Go from the whimsical to the common and always end with a generic font ("serif" or "sans-serif" for those systems that have none of the fonts in your list). This article will require you to define a new set of fonts.

Go to the CSS Styles panel and open the selector for the #logo ID by double-clicking it. This opens the CSS Style Definition dialog box with the default category set to Type. Click on the arrow to the right of the Font field. You will see a list of all the font lists already defined on your computer. Because the font list you want to use has not been set up, you will need to edit it. Go to the bottom of the font list and select Edit Font List.

The Edit Font List dialog box opens, giving you the option of either selecting a font from the list of installed fonts on your computer or entering a font name by hand. Because computer setups and platforms differ, you won't have all the fonts residing on your computer that you'll need to add.

If the font is included in the Available Fonts list on the right, highlight it and click the left arrow to add it to the Chosen Fonts list on the left. Make sure you add the fonts in the order given here because you are creating the order that browsers will attempt to display them. If the font is not available on your system, you'll have to type the font name into the text box under the Available Fonts list. Be sure to use correct spelling or the browser will not recognize it and won't display it.

For your list (which will style your heading) create this list of fonts in this order: "Juice ITC", "Apple Chancery", Impact, "Bradley Hand ITC", Skia, "Trebuchet MS", sans-serif (see Figure 2). If you're hand-coding this list, note that fonts with more than one word in their name must be typed in quotation marks, as we've shown. (Dreamweaver MX handles the quotation marks for you.) Click the top-left "+" button to add whatever you've placed in the Chosen Fonts list to the Font List at top, and click OK.

Figure 2. Creating a font list in the Edit Font List dialog box

We chose this font order for a reason. The list begins with the least common font and progresses to the most common, alternating back and forth between platforms. Always finish your list with the generic font ("serif" or "sans-serif") This guarantees that even if none of the fonts you've specified are installed on a user's machine, they'll have an experience similar to what you planned.

With Type still selected in the CSS Style Definition dialog box's Category list, open the Font pop-up menu to see the font list you just created. Select that font list and make just a few other adjustments: Type 50px in the Size text box and #333333 in the Color text box. Now select Block from the Category list and type 0.5 in the Letter Spacing text box; select "ems" too. Click OK. Your logo div is now styled.

Double-click the #script ID and make the following changes. For the fonts, choose a list like Verdana, Arial, Helvetica, and sans-serif (in that order). You may already have a font list created with a similar order. If you do, select it. If not, create it using the method described for the #logo ID in Step 6.

Back in the Type category of the CSS Style Definition dialog box, enter 14px in the Size text box and #666666 in the Color text box. Choose "lowercase" from the Case field. Move to the Block category: Enter 0.5 ems for Letter Spacing and leave Text Align set to "right." In the Positioning category, change the Placement section's Right field from 0 to 5 pixels. Click OK to update the #script ID.

If you open your style sheet in a text editor (or Dreamweaver MX) the #logo and #script styles should appear with these properties:

#logo{
   position: absolute;
   top: 30px;
   left: 30px;
   z-index: 50;
   font-family: "Juice ITC", "Apple Chancery", 
Impact, "Bradley Hand ITC", Skia, "Trebuchet MS", sans-serif;
   font-size: 50px;
   color: #333333;
   letter-spacing: 0.5em;
}


#script{
   position: absolute;
   top: 12px;
   right: 5px;
   text-align: right;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   text-transform: lowercase;
   color: #666666;
   letter-spacing: 0.5em;
}

Preview your page in a browser to make sure your changes appear correctly (either using File > Preview in Browser or pressing F12). Lookin' better? Now let's style the navigation.